<template>
    <van-nav-bar @click-left="onClickLeft" :title="typeName" left-text="返回" left-arrow>
        <template #right>
            <van-icon @click="showSearch = !showSearch" name="search" size="18" />
        </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search
    v-if="showSearch"
    v-model="keyword"
    @search="search"
    shape="round"
    placeholder="请输入搜索关键词"
    />
    <!-- 下拉菜单 -->
    <van-dropdown-menu>
        <van-dropdown-item v-model="typeid" :options="typeList" @change="changeType" />
        <van-dropdown-item v-model="flag" :options="flagList" @change="changeFlag"/>
        <van-dropdown-item v-model="sort" :options="sortList" @change="changeSort"/>
        <van-dropdown-item v-model="by" :options="byList" @change="changeBy"/>
    </van-dropdown-menu>
    <!-- 主体内容 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            :immediate-check='false'
            finished-text="没有更多了"
            @load="onLoad"
        >
            <!-- 推荐商品 -->
            <ul class="proul" v-if="list">
            <li v-for="item in list" :key="item.id">
                <div class="con">
                <router-link :to="{path:'/product/detail',query:{proid:item.id}}">
                    <img style="height: 170px;" :src="item.thumbs_text">
                    <p><span></span>{{item.name}}</p>
                    <p><span>￥</span>{{item.price}}</p>
                </router-link>
                </div>
            </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>

<script setup>
import { onBeforeMount, onMounted, reactive, ref } from "vue";

    const {proxy} = getCurrentInstance();
    const typeName = ref(proxy.$route.query.name)

    // 返回上一级
    const onClickLeft = () => history.back();

    onBeforeMount(() => {
        getType()
        onRefresh()
    })

    // 下拉菜单
    const flag = ref("0");
    const sort = ref("createtime");
    const by = ref('desc');

    // 标签列表
    const flagList = [
        {text: '全部商品', value: '0'},
        {text: '新品', value: '1'},
        {text: '热销', value: '2'},
        {text: '推荐', value: '3'},
    ];
    // 分类列表
    const typeList = reactive([
        {text: '全部分类', value: 0},
    ]);
    // 排序列表
    const sortList = [
        {text: '按上架时间', value: 'createtime'},
        {text: '按价格', value: 'price'},
        {text: '按库存', value: 'stock'}
    ]
    // 升降序
    const byList = [
        {text:"降序",value:"desc"},
        {text:"升序",value:"asc"}
    ]


    // 页码数
    let page = ref(1)
    // 请求数量
    let limit = 6
    // 类id
    let typeid = proxy.$route.query.id?parseInt(proxy.$route.query.id):0
    typeid = ref(typeid)
    // 是否展示搜索框
    let showSearch = ref(false)
    // 关键字
    let keyword = ref("")
    keyword.value = proxy.$route.query.keyword?proxy.$route.query.keyword:''

    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
  
    // 上拉加载
    const onLoad = async () => {
        
        if (refreshing.value) {
          refreshing.value = false;
        }

        let data = {
            typeid:typeid.value,
            page:page.value,
            keyword:keyword.value,
            limit,
            flag:flag.value,
            sort:sort.value,
            by:by.value
        }
        let result = await proxy.$POST({
            url:"/product/index",
            params:data
        })
        loading.value = false;
        if(result.code){
            page.value++
            list.value = list.value.concat(result.data.list)
            typeName.value = result.data.typeName
            return false
        }else{
            // 数据全部加载完成     
            finished.value = true;
            return false
        }
    };

    // 下拉刷新
    const onRefresh = () => {
        // 清空列表数据
        list.value = []
        // 初始化页码
        page.value = 1
        finished.value = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        loading.value = true;
        onLoad();
    };

    // 搜索
    const search = ()=>{
        // 关闭搜索框
        showSearch.value = false
        // 设置刷新状态为true
        refreshing.value = true
        // 触发刷新
        onRefresh()
    }

    // 获取所有分类
    const getType = async ()=>{
        let result = await proxy.$POST({
            url:"product/type",
        })
        if(result.code){
            result.data.forEach(item=>{
                typeList.push({
                    "text":item.text,
                    value:item.id
                })
            })
        }
    }

    // 改变选项事件
    const changeType = async (value)=>{
        refreshing.value = true
        onRefresh()
    }

    const changeFlag = (value)=>{
        refreshing.value = true
        onRefresh()
    }

    const changeSort =  (value)=>{
        refreshing.value = true
        onRefresh()
    }

    const changeBy =  (value)=>{
        refreshing.value = true
        onRefresh()
    }
    

</script>